<div class="console-sub-title">
    群组列表
    <div data-g-loading-tip data-g-is-loading="isLoading" data-g-is-successed="isSuccessed"></div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">概览</div>
    <table class="table" style="margin-top: 10px;margin-left: 10px;margin-right: 10px ; width: 90%">
        <thead>
        <tr>
            <th>队伍总数</th>
            <th>有效队伍</th>
            <th>男性队伍</th>
            <th>女性队伍</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>{{ groupSumStatisData.groupTotal }}</td>
            <td>{{ groupSumStatisData.groupValidTotal }}</td>
            <td>{{ groupSumStatisData.maleTotal }}</td>
            <td>{{ groupSumStatisData.femaleTotal }}</td>
        </tr>
        </tbody>
    </table>


</div>

<div class="panel panel-default">
    <div class="panel-heading">队伍列表</div>
    <div class="form-inline search-con" style="margin-top: 10px;margin-left: 10px;margin-right: 10px;">

        <select class="form-control" ng-model="searchType">
            <option value="groupIds">ID</option>
            <option value="name">队名</option>
        </select>

        <input type="text" class="form-control" placeholder="输入关键字" style="max-width:140px;"
               ng-model="searchContent">

        <!--<select class="form-control" ng-model="params.status">-->
        <!--<option value="identify">有效</option>-->
        <!--<option value="nickName">无效</option>-->
        <!--</select>-->
        <span style="margin-left: 10px;">队伍性别</span>
        <select class="form-control" ng-model="params.type">
            <option value="">全部</option>
            <option value="0">男</option>
            <option value="1">女</option>
            <option value="2">混合</option>
        </select>
        <span style="margin-left: 10px;">队伍状态</span>
        <select class="form-control" ng-model="params.status">
            <option value="">全部</option>
            <option value="1">有效</option>
            <option value="3">无效</option>
        </select>
        <span style="margin-left: 10px;">队伍类型</span>
        <select class="form-control" ng-model="params.barId">
            <option value="1">一起去唱K</option>
            <option value="2">今晚去蹦迪</option>
            <option value="3">出去喝一杯</option>
            <option value="4">我们出去吧</option>
        </select>
        <span style="margin-left: 10px;">创建时间</span>

        <div class="input-group dropdown" style="width: 140px;">
            <a class="dropdown-toggle my-toggle-select" role="button" data-toggle="dropdown" data-target="#" href="">
                <div class="input-group">
                    <input type="text" class="form-control" data-ng-model="params.registerTimeBegin"
                           data-date-time-input="YYYY-MM-DD" readonly>
                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                </div>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <datetimepicker data-ng-model="params.registerTimeBegin"
                                data-datetimepicker-config="{ dropdownSelector: '.my-toggle-select', startView: 'month', minView: 'day'}">
                </datetimepicker>
            </ul>
        </div>
        <span>-</span>

        <div class="input-group dropdown" style="width: 140px;">
            <a class="dropdown-toggle my-toggle-select" role="button" data-toggle="dropdown" data-target="#" href="">
                <div class="input-group">
                    <input type="text" class="form-control" data-ng-model="params.registerTimeEnd"
                           data-date-time-input="YYYY-MM-DD" readonly>
                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                </div>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <datetimepicker data-ng-model="params.registerTimeEnd"
                                data-datetimepicker-config="{ dropdownSelector: '.my-toggle-select', startView: 'month', minView: 'day'}">
                </datetimepicker>
            </ul>
        </div>

        <button type="button" class="btn btn-default" ng-click="searchParam()">筛选</button>
        <button type="button" class="btn btn-default" ng-click="reset()">重置</button>

    </div>

    <div class="form-inline clearfix" style="margin-bottom: 10px;">
        <button type="button" class="btn btn-danger pull-right" style="margin-right: 5px;" ng-click="dissolution()">
            解散
        </button>
        <button type="button" class="btn btn-danger pull-right" style="margin-right: 5px;" ng-click="export()">
            导出
        </button>
        <button type="button" class="btn btn-danger pull-right" style="margin-right: 5px;" data-toggle="modal" data-target="#exportGroupByFile">
            条件导出
        </button>
        <button type="button" class="btn btn-default pull-right" style="margin-right: 5px;" ng-click="getUserHeadImgByGroupIds()"  data-toggle="modal" data-target="#showCarouselDiaLog">
            选中队伍用户头像
        </button>
    </div>

    <div ui-grid="gridOptions" ui-grid-selection ui-grid-pagination class="grid" style="height:400px;"></div>
</div>

<!-- 模态框（Modal） -->
<div class="modal " id="group-detail" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" ng-bind="'队伍成员详情'"></h4>
                <div data-g-loading-tip data-g-is-loading="isLoading" data-g-is-successed="isSuccessed"></div>
            </div>
            <div ui-grid="groupGrid" class="grid" style="height:400px;padding-top: 10px"></div>
        </div>
    </div>
</div>

<div class="modal " id="exportGroupByFile" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">队伍条件导出数据</h4>
                <div data-g-loading-tip data-g-is-loading="isLoading" data-g-is-successed="isSuccessed"></div>
            </div>
            <form class="form-horizontal" ng-submit="exportByFile()">
                <div class="modal-body">
                    <div class="form-group">
                        <label>下载的数据:</label>
                        <label class="radio-inline">
                            <input type="radio" name="userTypeRadios" id="inlineRadio1" value="1" ng-model="downloadType" ng-checked="true" required> 队伍数据
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="userTypeRadios" id="inlineRadio2" value="2" ng-model="downloadType"> 队伍带用户数据
                        </label>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="groupFile">请选择要上传txt文件<font color="red">（**请上传txt文件）</font></label>
                            <input id = "groupFile" type="file" ngf-select="" ng-model="groupFile" name="groupFile">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-danger">导出</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                    <h4><strong>备注：</strong><br/></h4>
                    <dl>
                        <dt>1、导入文件模板格式如下：</dt>
                        <dd>
                            12617
                        </dd>
                        <dt>3、导入说明：</dt>
                        <dd>
                            比例：12617<br/>
                            说明：每一行为该队伍的id
                        </dd>
                    </dl>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal " id="showCarouselDiaLog" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">用户头像</h4>
            </div>

            <div id="headImgCarousel" class="carousel">
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <h4 class="modal-title">用户头像开始轮播（请向左侧点击）</h4>
                        <img src="/res/img/default-photo.png" alt="">
                    </div>
                    <div class="item" ng-repeat="userDatas in userDatasFromGroup track by $index">
                        <h4 class="modal-title">队伍ID:{{userDatas.groupId}}</h4>
                        <h3 class="modal-title">用户ID:{{userDatas.user.identify}}</h3>
                        <img src="/res/img/default-photo.png" ng-src="{{userDatas.user.head.url}}" alt="">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#headImgCarousel"
                   data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#headImgCarousel"
                   data-slide="next">&rsaquo;</a>
            </div>
        </div>
    </div>
</div>
